$(function (){
// todo write my code at here

    loadStudentList();
});

function loadStudentList(){
    $.ajax({
        url:"/api/student/list"
    }).done(function (data){
        // console.log(data)
        let html="";
        data.forEach((element, index) => {
            html+="<tr>"
            html+="<td>"+element.id+"</td>"
            html+="<td>"+element.name+"</td>"
            html+="<td>"+element.sex+"</td>"
            html+="<td>"+element.age+"</td>"
            html+="<td>"+element.sno+"</td>"

            html+="<td><a href='#' onclick='showStudenDlg("+element.id
                +")'>编辑</a> &nbsp;&nbsp; <a href='#' onclick='deleteById("+
                +element.id+")'>删除</a></td>"
            html+="</tr>"
        })
        $("#studentTb").html(html)
    });
}

let layerIndex;

// 弹出新增学生信息对话框
function showStudenDlg(id){

    let title='新增学生'
    if(id){
        //是编辑
        title='编辑学生'
        $("#formId").css("display", "block");

        //读取学生信息并赋值
        $.ajax({
            url:"/api/student/"+id,
            method: "GET"
        }).done(result=>{

            console.log(result)

            //遍历result对象并将值填充到#studForm表单中
            $.each(result, function (key, value){
                //修改选择器，确保选择的是#studForm内的字段
                var field = $('#studForm [name="' + key +'"]'); //选中对应的单选按钮

                if(field.is(':radio')){
                    field.filter('[value="' + value + '"]').prop('checked',true);
                }else if(field.is(':checkbox')){
                    field.prop('checked',value === "yes");//选中复选框
                }else{
                    field.val(value);//填充文本框或其他字段
                }
            });
        })

    }else{
        //是新增
        $("#studForm")[0].reset();
        // $("#formId").css("display", "none");
    }

    layerIndex= layer.open({
        type: 1,
        title: title,
        area: ['520px', 'auto'],
        content: $('#studForm') //捕获层
    });
}


layui.use(function(){
    layui.form.on('submit(stud-dlg)', function(){
        event.preventDefault();//阻止表单默认提交

        comminStuDlg()
    })
});


function comminStuDlg(){
    // 新增学生需要进行
    // （1）验证表单是否合法

    // （2）将表单数据发送到服务器的insert中，把提交按钮变灰
    let formData = $('#studForm').serialize();
    $.ajax({
        url: "/api/student/add",
        method: "POST",
        data: formData
    }).done(result=>{
        console.log(result);
        if(result.id){
            // （4）读取并更新原来的学生列表
            loadStudentList();
            // （3）关闭弹出层
            console.log("add success!")
            if(layerIndex)
                layer.close(layerIndex)

        }
    }).fail((jqXHR, textStatus, errorThrown)=>{
        console.error("Request failed" + textStatus + " - " + errorThrown);
        //可以在这里处理逻辑错误
        alert("An error occurred.  Please try again.");
    });
    $("#btnOK").prop("disabled", true).addClass("layui-btn-disabled");//禁用按钮
}

// function showStudenDlg(){
//     layer.open({
//         type: 1,
//         area: ['520px', 'auto'],
//         content: $('#studForm') //捕获层
//     });
// }

function deleteById(id){
    // 删除
    layer.confirm('你真的要删除吗?一旦删除，不可恢复！',{icon: 3}, function(){

        $.ajax({
            url:"/api/student/delete/"+id,
            method: "DELETE"
        }).done(result=>{
            loadStudentList();
        })
        layer.closeAll();

    },function(){

    });
}